<!--
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-11-21 10:05:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /-/src/pages/localConsultant.vue
 -->
<template>
	<view class="consultant-page">
		<view class="msg-top">
			<view class="banner">
				<image
					src="../static/images/local-banner.jpeg"
					mode="scaleToFill"
					lazy-load="false">
				</image>
			</view>
			<view class="product-classify">
				<view class="item" v-for="(item,index) in expertsList" :key="index" :data-type="item.title" @click="chooseloanType">
					<view class="icon">
						<image
							:src="item.icon"
							mode="aspectFill"
							lazy-load="false">
						</image>
					</view>
					<view class="text">{{item.title}}</view>
				</view>
			</view>
			<view class="label">
					<view class="lf">
						<view class="line"></view>
						<view class="text">{{loanType}}</view>
					</view>
					<view class="rt">
						<image
							src="../static//images/icon-local.png"
							mode="scaleToFill"
							lazy-load="false">
						</image>
						<picker  @change="pickerChange" data-key="area" :value="init.area.index" :range="init.area.array" range-key="area">
							<view class="uni-input">{{init.area.array[init.area.index].area}}</view>
						</picker>
					</view>
				</view>
		</view>
		<view class="persons-list">
			<view class="product-persons" v-for="(item,index) in personList" :data-id="item.id" :key="index" @click="navigateUrl">
				<PersonInfo :PersonInfo="item" :type="type"/>
			</view>
		</view>
		<noData v-if="personList.length==0&&flag"/>
		 <uni-load-more v-if="personList.length>5" :loadingType="loadingType"></uni-load-more>
	</view>
</template>

<script>
import Vue from 'vue'
import InterServer from "@/common/config/server";
import PersonInfo from "@/components/personInfo/personInfo.vue";
import mpvueCityPicker from "@/components/mpvue-citypicker/mpvueCityPicker";
import noData from '@/components/noData/noData';
import {localStorageSyncServer} from "@/common/js/common";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
export default {
	components:{
		PersonInfo,
		noData,
		uniLoadMore
	},
	data() {
		return {
			init:{
				area:{
					array:[{
						area:"全国",
							id:"",
						}],
						index:0
					},
				loanType:{
					array:['房产服务', '车产服务', '信用卡服务', '极速服务','工资流水服务','社保服务','营业执照服务','公积金服务','自存流水服务','按揭房服务','按揭车服务','保单服务'],
					index:0
				}
			},
			 expertsList:[{
					icon:"../static/images/icon_expert_1.png",
					title:"房产服务"
				},{
					icon:"../static/images/icon_expert_2.png",
					title:"车产服务"
				},{
					icon:"../static/images/icon_expert_3.png",
					title:"信用卡服务"
				},{
					icon:"../static/images/icon_expert_4.png",
					title:"极速服务"
				},{
					icon:"../static/images/icon_expert_5.png",
					title:"工资流水服务"
				},{
					icon:"../static/images/icon_expert_6.png",
					title:"社保服务"
				},{
					icon:"../static/images/icon_expert_7.png",
					title:"营业执照服务"
				},{
					icon:"../static/images/icon_expert_8.png",
					title:"公积金服务"
				},{
					icon:"../static/images/icon_expert_9.png",
					title:"自存流水服务"
				},{
					icon:"../static/images/icon_expert_10.png",
					title:"按揭房服务"
				},{
					icon:"../static/images/icon_expert_11.png",
					title:"按揭车服务"
				},{
					icon:"../static/images/icon_expert_12.png",
					title:"保单服务"
				}],
			loanType:"房产服务",	
			flag:false,
			type:1,
			pageNum:0,  //当前页数
			pageSize:10,  //每页显示几条
			totalPage:0,  //总共页数
			loadingType:0, //加载类型0（loading前），1（loading中），2（没有更多了）
      		pageNumber:0,
			personList:[]
		};
	},
	onShow(){
		// #ifdef H5
			document.title=`本地专家服务`
		// #endif
		this.personList.length=0;
		this.getArea()  //获取地区
		this.listExpert() //获取顾问列表
	},
	//上拉加载
	onReachBottom(){
		this.pageNum=this.pageNum+1;
		if(this.pageNumber+1<this.totalPage){
		this.loadingType=1
			this.listExpert() //获取顾问列表
		}else{
		this.loadingType=2
		}
	},
	methods: {
		//获取地区
		getArea(){
			InterServer.area({

			}).then(res=>{
				if(res.code==200){
					 this.init.area.array=this.init.area.array.concat(res.data)
				}
			})
		},
		//顾问列表
		listExpert(){
			let city=this.init.area.array[this.init.area.index].area=="全国" ? "" : this.init.area.array[this.init.area.index].area;
			 Vue.showCustomLoading()
			InterServer.listExpert({
				city: city,
				enable: true,
				expert: 0,
				pageNum: this.pageNum,
				pageSize:this.pageSize,
				type: this.loanType
			}).then(res=>{
				if(res.code==200){
					uni.hideLoading();
					this.personList=this.personList.concat(res.data.dataList)
					this.totalPage=res.data.totalPage;
					this.pageNumber=res.data.pageNumber;
					this.flag=res.data.dataList.length==0 ? true : false
				}
			})
		},
		//页面跳转
		navigateUrl(e){
			let id=e.currentTarget.dataset.id
			let url=`./consultantDetails?type=local&id=${id}&recordType=1`
			Vue.customNavigateTo(url);
		},
		//picker切换
		pickerChange(e){
			console.log(e)
			const key=e.currentTarget.dataset.key
			const index = e.target.value
			this.init[key].index=index
			this.personList.length=0;
			this.onInit()
			this.listExpert() //获取顾问列表
		},
		chooseloanType(e){
			console.log(e.currentTarget.dataset.type)
			this.loanType=e.currentTarget.dataset.type;
			this.personList.length=0;
			this.onInit()
			this.listExpert() //获取顾问列表
			
		},
		//状态初始化
		onInit(){
			this.pageNum=0;
			this.loadingType=0; 
      		this.pageNumber=0;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		}
	}
};
</script>

<style lang="less" scoped>
.consultant-page {
	background: #ffffff;
	.msg-top{
		position: fixed;
		width: 100%;
		height: 571upx;
		left: 0;
		top: 0;
		z-index: 9999;
		background: #ffffff;
		.banner{
			width: 100%;
			height:270upx;
			image{
				width: 100%;
				height: 270upx;
			}
		}
		.product-classify {
			color: #303030;
			font-size: 30upx;
			background: #ffffff;
			height: 100upx;
			position: absolute;
			top: 65upx;
			left: 50%;
			margin-left: -351upx;
			z-index: 999;
			width:702upx;
			height:413upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 4upx 6upx rgba(0,0,0,0.16);
			border-radius:20upx 20upx 0upx 0upx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			align-items: baseline;
			padding: 40upx 46upx 44upx;
			box-sizing: border-box;
			.item{
				width: 145upx;
				// height: 100upx;
				text-align: center;
				.icon{
					height: 48upx;
					image{
						width: 48upx;
						height: 48upx;
					}
				}
				.text{
					height:33upx;
					font-size:24upx;
					font-family:PingFang-Semibold;
					font-weight:bold;
					line-height:33upx;
					color:rgba(124,124,124,1);
					margin-top: 12upx;
					margin-bottom: 30upx;
				}
			}
		}
		.label{
			width:702upx;
			height:50upx;
			background:rgba(255,255,255,1);
			box-shadow:0px 4upx 6upx rgba(0,0,0,0.16);
			margin-top: 24upx;
			position: absolute;
			bottom: 20upx;
			left: 50%;
			margin-left: -351upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 16upx;
			.lf{
				display: flex;
				.line{
					width:4upx;
					height:30upx;
					background:rgba(0,136,255,1);
					margin-right: 11upx;
				}
				.text{
					height:32upx;
					font-size:30upx;
					font-family:PingFang-Semibold;
					font-weight:bold;
					line-height:24upx;
					color:rgba(51,51,51,1);
				}
			}
			.rt{
				display: flex;
				align-items: center;
				image{
					width: 18upx;
					height: 24upx;
					margin-right: 12upx
				}
				.uni-input{
					font-size:26upx;
					font-family:PingFang-Semibold;
					font-weight:bold;
					color:rgba(102,102,102,1);
				}
			}

		}
	}
	.persons-list{
		 overflow: hidden;
		 margin-top:571upx;
	}
	.product-persons{
		background: #ffffff;
		border-radius: 10upx;
		box-shadow: 0 0 20upx 5upx #f3f4f6;
		.contact{
          &-info{
			display: flex;
			justify-content: space-between;
			align-items:center;
		    padding: 15upx 30upx 15upx 25upx;
		  }
		  &-count{
			  font-size: 24upx;
			  color:#999999;
		  }
		}
		.consulta-method{
			display: flex;
			.consulta-btn{
				width: 150upx;
				font-size:26upx;
				font-weight: bold;
				height: 60upx;
				border-radius: 10upx;
				display: flex;
				align-items: center;
				justify-content: center;

			}
			.telephone{
				background: #ffffff;
				line-height: 56upx;
				border: 4upx solid #1b65fa;
				color: #1b65fa;
				margin-right: 30upx;
				
			}
			.on-line{
				border: 4upx solid #1b65fa;
				background: #1b65fa;
				color:#ffffff;
			}

		}
	}
}
</style>
